<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="search">
        <el-form-item>
          <el-input v-model="search.key" placeholder="高级查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="queryData" class="el-icon-zoom-in">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd" class="el-icon-plus">新增</el-button>
          <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" class="el-icon-delete">批量删除
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.data" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="100" sortable>
      </el-table-column>
      <el-table-column prop="logo" label="店铺logo" width="110" sortable>
        <template slot-scope="scope">
          <img :src="scope.row.logo" alt="logo" width="80" height="80"/>
        </template>
      </el-table-column>
      <el-table-column prop="tel" label="联系方式" width="100" sortable>
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="120" sortable>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="180" sortable>
      </el-table-column>
      <el-table-column prop="lng" label="地址经度" width="100" sortable>
      </el-table-column>
      <el-table-column prop="lat" label="地址纬度" width="100" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="100" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.state==1" style="color: #e0252c">待审核</span>
          <span v-else-if="scope.row.state==2" style="color: #196dd2">审核通过待激活</span>
          <span v-else-if="scope.row.state==3" style="color: #20a0ff">激活成功</span>
          <span v-else style="color: #ee622b">驳回</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230">
        <template scope="scope">
          <el-button type="success" size="small" plain @click="handleSave(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" plain @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" size="small" plain @click="handleReview(scope.$index, scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页工具条-->
    <el-col :span="24" class="toolbar">
      <!--
        el-pagination 表示分页
        @size-change 每页跳数变化时候会触发的方法
        @current-change 当前页数改变的时候
        :current-page 绑定当前页的数据
        :page-sizes="[100, 200]  每页多少调的选择
        :page-size="100"  每页的条数
        :total="400" 总数
      -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          style="float:right"
      >
      </el-pagination>
    </el-col>

    <!--新增/修改界面-->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" ref="saveFormData">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="saveForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺logo" prop="logo">
          <el-input v-model="saveForm.logo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel">
          <el-input v-model="saveForm.tel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="注册时间" prop="registerTime">
          <el-input v-model="saveForm.registerTime" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="saveForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址经度" prop="lng">
          <el-input v-model="saveForm.lng" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址纬度" prop="lat">
          <el-input v-model="saveForm.lat" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-input v-model="saveForm.state" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit">提交</el-button>
      </div>
    </el-dialog>

    <!--审核界面-->
    <el-dialog title="审核" :visible.sync="reviewFormVisible" :close-on-click-modal="false">
      <el-form :model="reviewForm" label-width="80px" ref="addForm">
        <el-row>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <h3 class="title">店铺信息</h3>
              <el-form-item label="店铺名称" prop="name">
                <el-input :disabled="true " v-model="reviewForm.name" auto-complete="off" id="name"></el-input>
              </el-form-item>
              <el-form-item label="店铺logo" prop="logo">
                <template slot-scope="scope">
                  <img :src="reviewForm.logo" alt="logo" width="50" height="50"/>
                </template>
              </el-form-item>
              <el-form-item label="联系电话" prop="tel">
                <el-input :disabled="true" v-model="reviewForm.tel" auto-complete="off" id="tel"></el-input>
              </el-form-item>
              <el-form-item label="申请时间" prop="registerTime">
                <el-input :disabled="true" v-model="reviewForm.registerTime" auto-complete="off"
                          id="registerTime"></el-input>
              </el-form-item>
              <el-form-item label="店铺地址" prop="address">
                <el-input :disabled="true" v-model="reviewForm.address" auto-complete="off" id="address"></el-input>
              </el-form-item>
              <el-descriptions>
                <el-descriptions-item label="审核状态">
                  <template>
                    <span v-if="reviewForm.state==1" style="color: #ff4949">待审核</span>
                    <span v-if="reviewForm.state==2" style="color: #196dd2">审核通过待激活</span>
                    <span v-if="reviewForm.state==3" style="color: #13ce66">激活成功</span>
                    <span v-if="reviewForm.state==4" style="color: #ee622b">驳回</span>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple-light">
              <h3 class="title">管理员信息</h3>
              <el-form-item label="账号" prop="username">
                <el-input :disabled="true" v-model="reviewForm.admin.username" auto-complete="off" />
              </el-form-item>
              <el-form-item label="姓名" prop="realName">
                <el-input :disabled="true" v-model="reviewForm.admin.realName" auto-complete="off" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input :disabled="true" v-model="reviewForm.admin.email" auto-complete="off" />
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input :disabled="true" v-model="reviewForm.admin.phone" auto-complete="off" />
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <h3 class="title">问题反馈</h3>
              <el-form-item label="问题类型" prop="manager">
                <el-select v-model="reviewForm.questionType" clearable placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="描述" prop="details">
                <el-input v-model="reviewForm.questionDes" :rows="2" type="textarea" placeholder="请输入内容"
                          auto-complete="off" id="details"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="reviewFormVisible = false">取消</el-button>
        <el-button type="danger" @click.native="rejectSubmit">驳回</el-button>
        <el-button type="primary" @click.native="saveSubmit">通过</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      details: "",
      options: [
        {
          value: '1',
          label: '店铺名称异常'
        }, {
          value: '2',
          label: '店铺logo异常',
        }, {
          value: '3',
          label: '店铺地址异常'
        }, {
          value: '4',
          label: '邮箱异常'
        }, {
          value: '5',
          label: '电话异常'
        }, {
          value: '6',
          label: '管理员账号异常'
        }],
      value: '',
      reviewFormVisible: false,
      reviewForm: {
        id: null,
        name: "",
        logo: "",
        tel: "",
        registerTime: "",
        address: "",
        lng: "",
        lat: "",
        state: "",
        admin: {
          username: "",
          realName: "",
          phone: "",
          email: "",
          password: ""
        },
        questionType: "", // 问题类型
        questionDes: "" // 问题描述
      },
      listLoading: false,
      deptTree: [],
      employees: [],
      search: {
        key: '',
        pageSize: 3,
        currentPage: 1
      },
      pageInfo: {
        data: [],
        total: 0,
      },
      sels: [], //列表选中列
      saveFormVisible: false,
      saveForm: {
        id: null,
        name: "",
        logo: "",
        tel: "",
        registerTime: "",
        address: "",
        lng: "",
        lat: "",
        state: ""
      }
    }
  },
  methods: {
    //审核驳回
    rejectSubmit() {
      this.$confirm('确认驳回吗?', '提示', {
        type: 'warning'
      }).then(() => {
        //发请求
        this.$http.post("/shop/reject", this.reviewForm)
            .then((res) => {
              console.log(this.reviewForm)
              res = res.data
              if (res.success) {
                this.$message({message: '驳回成功', type: 'success'});
                this.listLoading = false;
                this.reviewFormVisible = false
                // 刷新列表
                this.getShop();
              } else {
                this.$message({message: '驳回失败', type: 'danger'});
              }
              // 刷新页面
              this.getShop();
            })
            .catch((error) => {
            })
      }).catch(() => {
      });
    },
    //审核通过
    saveSubmit() {
      this.$confirm('确认通过吗?', '提示', {
        type: 'warning'
      }).then(() => {
        //发请求
        this.$http.post("/shop/access", this.reviewForm)
            .then((res) => {
              res = res.data
              if (res.success) {
                this.$message({message: '审核成功', type: 'success'});
                this.listLoading = false;
                this.reviewFormVisible = false;
                // 刷新列表
                this.getShop();
              } else {
                this.$message({message: '审核失败', type: 'danger'});
              }
              // 刷新页面
              this.getShop();
            })
            .catch((error) => {
            })
      }).catch(() => {
      });
    },
    //查询管理员信息
    getAdmin(id) {
      this.$http.get("/shop/getAdmin/" + id)
          .then(res => {
            res = res.data;
            if (res.success) {
              console.log(res)
              this.reviewForm = res.data;
              this.reviewFormVisible = true;
            }
          })
          .catch(res => {
          })
    },
    //点击审核按钮
    handleReview(index, row) {
      this.getAdmin(row.id);
    },
    //获取上级部门树方法
    getDeptTree() {
      //发送请求
      this.$http.get("/shop/deptTree")
          .then(res => {
            res = res.data;
            if (res.success) {
              this.deptTree = res.data;
            }
          })
          .catch(res => {
          })
    },
    //部门管理员方法
    getManagers() {
      //发送请求
      this.$http.get("/employee")
          .then(res => {
            res = res.data;
            if (res.success) {
              this.employees = res.data;
            }
          })
          .catch(res => {
          })
    },
    //点击新增方法
    handleAdd() {
      this.saveFormVisible = true;
      //清空数据
      this.saveForm = {
        id: null,
        name: "",
        intro: "",
        manager: {
          id: "",
          username: ""
        },
        parent: {
          id: null,
          name: "",
        },
        state: ""
      },
          this.getManagers();
      //调用上级部门树的方法
      this.getDeptTree();
    },
    //点击查询方法
    queryData() {
      this.search.currentPage = 1;
      this.getShop();
    },
    //每页跳数变化时候会触发的方法
    handleSizeChange(value) {
      this.search.pageSize = value;
      this.getShop();
    },
    handleCurrentChange(val) {
      //val 当前页的页数
      this.search.currentPage = val;
      this.getShop();
    },
    //获取用户列表
    getShop() {
      this.listLoading = true;
      this.$http.post("/shop", this.search)
          .then(res => {
            this.listLoading = false;
            res = res.data
            if (res.success) {
              // this.shop = res.data.data;
              // this.total = res.data.data;
              this.pageInfo = res.data;
            }
          })
          .catch(res => {
          })
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$http.delete("/shop/" + row.id)
            .then(res => {
              res = res.data;
              this.listLoading = false;
              if (res.success) {
                this.$message({type: "success", message: "删除成功"})
              } else {
                this.$message.error("删除失败" + res.msg);
              }
              this.search.currentPage = 1;
              this.getShop();
            })
            .catch(res => {

            })

      }).catch(() => {

      });
    },
    //显示新增/修改界面
    handleSave: function (index, row) {
      this.saveFormVisible = true;
      this.saveForm = JSON.parse(JSON.stringify(row)); //回显数据
      var split = row.path.split("/");//此时需要自己id和上级部门的id、可根据path去获取上级部门
      var data = [];
      for (let i = 1; i < split.length - 1; i++) {
        data.push(Number.parseInt(split[i]));
      }
      this.saveForm.parent = data;
      if (!row.parent) {
        this.saveForm.parent = {
          id: null,
          name: ""
        }
      }
      if (!row.manager) {
        this.saveForm.manager = {
          id: null,
          username: ""
        }
      }
      this.getManagers();
      //调用上级部门树的方法
      this.getDeptTree();
      this.getShop();
    },
    //新增/修改
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            let para = Object.assign({}, this.saveForm);
            var parent = para.parent
            if (parent.length >= 0) {
              if (parent.length == 0) {
                para.parent = {id: null, name: ""}
              } else {
                para.parent = {id: parent[parent.length - 1], name: ""}
              }
            }
            //发送请求
            this.$http.put("/shop", para)
                .then(res => {
                  this.saveFormVisible = false;
                  this.$message({type: "success", message: "保存成功"});
                  this.getShop(); //刷新页面
                })
                .catch(res => {

                })
          });
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id)
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        // 发送请求
        this.$http.patch("/shop", ids)
            .then(res => {
              res = res.data;
              this.listLoading = false;
              if (res.success) {
                this.$message({type: "success", message: "删除成功"})
              } else {
                this.$message.error("删除失败" + res.msg);
              }
              this.search.currentPage = 1;
              this.getShop();
            })
            .catch(res => {

            })
      }).catch(() => {

      });
    }
  },
  mounted() {
    this.getShop();
  }
}
</script>

<style scoped>

</style>